<template>
  <view style="bottom-input">
    <!-- 底部输入框 -->
    <view
      class="chat_input_box"
      :style="{ paddingBottom: showBoxTools ? '0' : deviceBottom + 'px' }"
    >
      <slot name="input-top"></slot>
      <view
        class="chat_input"
        :style="{
          width: keyboardStatus ? '100%' : 'auto',
          position: keyboardStatus ? 'fixed' : '',
          padding: keyboardStatus ? '10rpx' : '',
          bottom: keyboardStatus ? keyboardHeight + 'px' : '',
          backgroundColor: keyboardStatus ? '#F8F8F8;' : '#F8F8F8',
        }"
      >
        <!--  -->
        <!-- <image @click="clickVoice" class="voice_img"
					:src="isVoice ? '../../../static/img/chat/jianpan.png' : '../../../static/img/chat/yuyin.png'"
					mode=""></image> -->
        <view class="conter_box">
          <template v-if="isVoice">
            <view
              class="voice_box"
              @touchstart="touchstartVoice"
              @touchmove.stop.prevent="touchmoveVoice"
              @touchend="touchendVoice"
              @touchcancel="touchcancelVoice"
            >
              <text class="voice_text">{{ voiceText }}</text>
            </view>
          </template>
          <!-- :adjust-position="false" -->
          <template v-else>
            <textarea
              v-model="textareaVal"
              :hideDoneButton="true"
              @keyboard="keyboardInput"
              ref="textareaRef"
              @linechange="texTlinechange"
              class="textarea_input"
              type="text"
              @blur="tblur"
              @focus="tfocus"
              :style="{
                paddingTop: lineCount == 1 ? '24rpx' : '0rpx',
                paddingBottom: lineCount == 1 ? '17rpx' : '0rpx',
              }"
            />
          </template>
        </view>
        <image
          @click="clickEmoj(1)"
          class="emoj_img"
          src="../../../static/img/chat/biaoqing.png"
          mode=""
        >
        </image>
        <view
          class="btn_box"
          :style="{ background: t('color1') }"
          v-if="!textareaVal.length == 0 && !isVoice"
          @click="clickMsg"
        >
          <text class="btn_text">发送 </text>
        </view>
        <image
          v-else
          @click="clickEmoj(2)"
          class="add_img"
          src="../../../static/img/chat/add.png"
          mode=""
        >
        </image>
      </view>
      <view :style="boxToolsStyles" v-show="showBoxTools">
        <swiper
          :current="currentBoxTools - 1"
          class="fun_swiper"
          disable-touch
          @change="onSwiperChange"
        >
          <swiper-item class="sitem">
            <view class="swiper_item">
              <emoji-box @setEmoj="setEmoj" :emojiList="emojiList"></emoji-box>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper_item">
              <tool-box :menu="menu" @toolItem="toolItem"></tool-box>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <!-- 语音状态显示 -->
    <template v-if="voiceFlg">
      <view class="voice_bd">
        <view class="voice_ui">
          <image
            class="voice_ui_img"
            src="../../../static/img/chat/microphone.png"
          ></image>
          <text class="voice_ui_text">{{ voiceTis }}</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
var app = getApp();
import Chat from "./minxi/chat.js";
import ToolBox from "./tool.vue";
import EmojiBox from "./emoj.vue";

export default {
  data() {
    return {
      showMeum: true,
    };
  },
  props: {
    value: String,
    // 底部菜单
    menu: {
      type: Array,
      default: () => [],
    },
    isSafeArea: Boolean,
  },
  mixins: [Chat],
  components: { ToolBox, EmojiBox },
  computed: {
    classes() {
      // return `chat-sound-wrap ${this.data.right ? 'chat-sound-right-wrap' : ''}`
    },
  },
  watch: {
    value: {
      handler(val) {
        this.textareaVal = val || "";
      },
      immediate: true,
    },
  },
};
</script>

<style scoped>
.chat_input_box {
  width: 750rpx;
  background-color: #f8f8f8;
}

.chat_input {
  flex-direction: row;
  align-items: center;
  height: 108rpx;
  display: flex;
}

.textarea_input {
  flex: 1;
  height: 82rpx;
  /* line-height: 82rpx; */
  padding-left: 14rpx;
  padding-right: 14rpx;
  background-color: #ffffff;
  border-radius: 6rpx;
  font-size: 14px;
  width: auto;
  margin-left: 18rpx;
}

.voice_img {
  width: 51rpx;
  height: 51rpx;
  margin-left: 30rpx;
  margin-right: 18rpx;
}

.emoj_img {
  width: 51rpx;
  height: 51rpx;
  margin-left: 18rpx;
  margin-right: 13rpx;
}

.add_img {
  width: 51rpx;
  height: 51rpx;
  margin-left: 15rpx;
  margin-right: 30rpx;
}

.btn_box {
  width: 112rpx;
  height: 60rpx;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  background-color: #1e89ff;
  margin-right: 18rpx;
  display: flex;
}

.btn_text {
  font-size: 28rpx;
  color: #ffffff;
}

.fun_swiper {
  flex: 1;
  background-color: #f8f8f8;
  height: 400upx;
}

.sitem {
  overflow-y: scroll;
}

.swiper_item {
  flex: 1;
}

.conter_box {
  flex: 1;
  flex-direction: row;
}

.voice_box {
  flex: 1;
  height: 82rpx;
  background-color: #ffffff;
  border-radius: 6rpx;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 82rpx;
}

.voice_text {
  font-size: 32rpx;
  font-weight: 400;
  color: #161616;
}

/* 语音ui */
.voice_bd {
  position: fixed;
  display: flex;
  justify-content: center;
  /* 添加水平居中 */
  align-items: center;
  /* 垂直居中（已存在） */
  bottom: 400rpx;
  left: 50%;
  /* 水平定位起点 */
  transform: translateX(-50%);
  /* 向左偏移自身宽度的一半 */
  width: 750rpx;
  height: 400rpx;
}

.voice_ui {
  width: 320rpx;
  height: 360rpx;
  border-radius: 8rpx;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.voice_ui_img {
  width: 180rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.voice_ui_text {
  color: #ffffff;
  font-size: 30rpx;
}

.audio_box {
  width: 200rpx;
  height: 300rpx;
}
</style>
